<title>群组设置</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb" lay-separator=">">
        <a lay-href=""><i class="layui-icon layui-icon-locate"></i>您当前的位置：</a>
        <a><cite>系统管理</cite></a>
        <a><cite>群组设置</cite></a>
    </div>
</div>

<div class="layui-fluid groupMain-content">
    <div class="layui-card clearfix layui-row">
        <div class="layui-col-md7 layui-col-lg7">
            <div class="left-table layui-card-header blockTitle">
                <img src="../../../../dist/style/res/formFill/tem-task.png" class="card-header-icon"/>
                <span class="card-header-title">群组信息</span>
                <button type="button" class="layui-btn layui-btn-sm T-event" data-target="addGroup" style="position: relative;">
                    <i class="layui-icon layui-icon-add-1 xinjianStyle" style="right:35px;margin-top:-9px;"></i>新建
                </button>
            </div>
            <table class="layui-table" id="mag-table-simple" lay-filter="mag-table-simple"></table>
        </div>
        <div class="right-table layui-col-md5 layui-col-lg5">
            <div class="layui-card-header blockTitle" >
                <img src="../../../../dist/style/res/formFill/tem-task.png" class="card-header-icon"/>
                <span class="card-header-title">群组成员信息</span>
            </div>
            <table class="layui-table" id="mag-table-child" lay-filter="mag-table-child"></table>
            <div id="laypage"></div>
        </div>
    </div>
</div>

<!-- 群组表格工具栏 -->
<script type="text/html" id="mag-table-operate-bar">
    <a class="layui-icon layui-icon-edit my-table-btn-edit" lay-event="edit" lay-tips="编辑"></a>
    <a class="layui-icon layui-icon-delete my-table-btn-del" lay-event="del" lay-tips="删除"></a>
</script>

<!-- 人员表格工具栏 -->
<script type="text/html" id="mag-table-operate-child-bar">
    <a class="layui-icon layui-icon-add-1 my-table-btn-add" lay-event="add" lay-tips="新增"></a>
    <a class="layui-icon layui-icon-delete my-table-btn-del" lay-event="del" lay-tips="删除"></a>
</script>

<style>
    .layui-fluid{
        padding: 15px 0;
    }
    .groupMain-content .layui-card{
        border-radius: 4px;
        padding: 0 15px;
    }
    .groupMain-content .layui-card:nth-child(3){
        width: 100%;
        display: flex;
        height: 140px;
    }
    .groupMain-content .layui-card-header{
        height: 34px;
        border-bottom: 1px solid #D2D2D2;
        font-size: 14px;
        padding: 0 0 5px 0;
        line-height: 40px;
    }
    .groupMain-content .card-header-title{
        margin-left: 10px;
    }
    .groupMain-content .layui-btn+.layui-btn{
        margin-left: 0;
    }
    .groupMain-content .card-header-icon{
        width: 18px;
        height: 18px;
    }
    .groupMain-content .layui-btn{
        margin-left: 10px;
        width: 68px;
        background-color: #2669B1;
        text-align: right;
        -ms-behavior: url(../../dist/style/res/PIE.htc);
		behavior: url(../../dist/style/res/PIE.htc);
    }
    .left-table{
        padding-right: 10px;
    }
    .right-table{
        padding-left: 10px;
    }
    .groupMain-content #pageBoxMag{
        margin: 0 auto;
        width: 100%;
    }
    .groupMain-content #pageBoxMagChild{
        margin: 0 auto;
        width: 100%;
    }
    .layui-table-box .layui-table[lay-even] tbody tr.liActive{
        background-color: #FDE7A3 !important;
    }
    .layui-table[lay-even] tbody tr:nth-child(odd) {
        background-color: #D3E5FF;
    }
    .layui-table[lay-even] tbody tr:nth-child(even) {
        background-color: #fff;
    }
    .layui-table[lay-even] tbody tr:nth-child(odd):hover, .layui-table[lay-even] tbody tr:nth-child(even):hover{
        background-color: #f2f2f2; 
    }
    .groupMain-content .layui-table tbody tr{
        height: 30px;
    }
    .layui-layer .layui-layer-title {
        height: 35px;
        line-height: 35px;
        padding: 0;
        border-bottom: none;
        background: url(/src/style/res/formFill/layer-head.png) no-repeat center center;
    }
    .formFill-icon {
        display: inline-block;
        width: 3px;
        height: 14px;
        background-color: #FFFFFF;
        vertical-align: middle;
        margin: 0 12px 0 24px;
    }
    #pageBoxMag{
        border: 1px solid #e2e2e2;
        border-top: none;
    }
    #pageBoxMag .layui-laypage{
        margin: 7px 0 0 0;
    }
    #pageBoxMag .layui-laypage a{
        border: none;
    }
    .layui-table-view{
        margin: 10px 0 0 0;
    }

    /* review style */
    .layui-btn-add{
        position: relative;
    }
    .layui-btn-add .layui-icon{
       right: 36px;
       margin-top: -8px;
    }
    .my-table-btn-del, .my-table-btn-add, .my-table-btn-edit{
        font-size: 20px;
		border-width: 1px;
		border-style: solid;
		border-radius: 4px;
	}
    .my-table-btn-del{
        color: #FF4E32 !important;
		border-color: #FF4E32;
    }
    .my-table-btn-add{
        color: #2EB36C !important;
		border-color: #2EB36C;
    }
    .my-table-btn-edit{
        color: #FD9404;
        border-color: #FD9404;
    }
	.my-table-btn-del:hover, .my-table-btn-add:hover, .my-table-btn-edit:hover{
		color: #0BAFFD !important;
		border-color: #0BAFFD;
	}
    .layui-table-cell{
        height: inherit;
        text-align: center;
    }

    /*laypage style*/
    #laypage{
        height: 33px;
        line-height: 33px;
        border: 1px solid #E6E6E6;
        border-top: none;
        font-size: 12px;
        padding: 5px 7px 0;
        white-space: nowrap;
    }
    #laypage .layui-laypage{
        position: relative;
        margin: 0;
    }
</style>
<script>
layui.use(['admin','table','laypage', 'laytpl','layer','element','tools','form'], function(){
    var $ = layui.$,
        admin = layui.admin,
        laytpl = layui.laytpl,
        view = layui.view,
        element = layui.element,
        layer = layui.layer,
        laypage = layui.laypage,
        tools = layui.tools,
        filenames = [],
        table = layui.table,
        form = layui.form,
        group_id = null,
        group_type = null,
        selectDep = [],
        layout = ['.layui-table th', '.layui-table td']; 
        
        window.currpage = 1;
        window.limitNum = 10;
           if(tools.isIE()){
            $(".xinjianStyle").css({'top':'10px'})
           }
        initTable(); //加载群组信息表格

        //按钮点击事件
        $('.groupMain-content').on('click', '.T-event', function() {
            var target = $(this).data('target');
            if(target == 'addGroup'){ //新建群组
                layer.open({
                    id: 'group-add-pastHtml',
                    title: '<i class="formFill-icon"></i><span style="color:#FFF;">新增群组</span>',
                    offset: '200px',
                    type: 1,
                    shadeClose: true,
                    area: ['400px', '380px'],
                    success: function(lay, index) {
                        view(this.id).render("./system/group/addGroup", {
                            groupInfo: { groupname: '', memo: ''}
                        }).done(function() {
                            form.on('submit(formSubmit)', function(data){
                                var type = '1', //1为单位 2为人员
                                    jsonId = layui.data('layuiAdmin').access_token;
                                admin.req({
                                    type:"post",
                                    url: 'myapi/DC/api/rest/web/custom/group',
                                    data:{
                                        model: "insert",
                                        groupname: data.field.groupName,
                                        memo: data.field.memoVal,
                                        grouptype: type,
                                        jsonId: jsonId
                                    },
                                    success: function (res) {
                                        if(res.retcode == "0"){
                                            initTable();
                                            layer.close(index);
                                            layer.msg('保存成功');
                                        }
                                    }
                                })
                            })
                        });
                    }
                });
            }
        })

        //加载群组信息表格
        function initTable(){
            table.render({
                elem: '#mag-table-simple',
                url: 'myapi/DC/api/rest/web/custom/group',
                height: 750,
                where: {
                    model:"select",
                    access_token: layui.data('layuiAdmin').access_token
                },
                text: {
                    none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                },
                request: {
                    limitName: 'count'
                },
                parseData: function(res){
                    return {
                        "code": res.retcode,
                        "msg": res.retmsg,
                        "count": res.data.totalNumber,
                        "data": res.data.data
                    }
                },
                cellMinWidth: 80,
                page: {
                    groups: 1,
                    limit: 10,
                    next:'<i class="layui-icon">&#xe602;</i>',
                    prev:'<i class="layui-icon">&#xe603;</i>',
                    first: '<i class="layui-icon">&#xe65a;</i>',
                    last: '<i class="layui-icon">&#xe65b;</i>',
                    layout: ['refresh', 'first', 'prev', 'skip', 'count',  'allPage', 'next', 'last'],
                    extend:{
                        first: true, //是否显示首页
                        spr: false,//是否显示页码分页符号 默认显示
                        pagecount: true//页码是否显示总数  groups=1时才有效
                    }
                },
                cols: [[
                    { type: 'numbers', title: '序号', width: 44 },
                    { field:'groupname', title: '群组名称' },
                    { field : 'username', title: '创建人', width: 150 },
                    { field : 'createtime', title: '创建时间', width: 165 },
                    { field:'memo', title: '备注信息' },
                    { title: '操作', align: 'center', toolbar: '#mag-table-operate-bar'}
                ]],
                skin: 'nob',
                even: true,
                done: function(res, curr, count){
                    var data = res.data;
                    if(data && data.length > 0){
                        group_id = data[0].id; 
                        group_type = data[0].grouptype;
                        initTableUser(data[0].id, 1, 10); 
                        $('[lay-id="mag-table-simple"]').find('tr').eq(1).addClass('liActive');
                    }else{
                        tools.setFont(layout);
                    }
                }
            });
        }

        //加载人员信息表格
        function initTableUser(groupId, page, count, groupType){
            admin.req({
                url: 'myapi/DC/api/rest/web/custom/GroupOfPeople',
                data: {
                    model: "select",
                    group_id: groupId,
                    page: page, 
                    count: count          
                },
                done: function(res){
                    var data = res.data.data;
                    data && data.length == 0 ? data = [{ membername: '', dept_level: '', createtime: '' }] : data;
                    if(res.retcode == '0'){
                        table.render({
                            elem: '#mag-table-child',
                            height: 710,
                            text: {
                                none: '<div class="no-data-tips"><img src="/src/style/res/about/empty.png"><p style="color:#DBDBDB;">暂无数据</p></div>'
                            },
                            cellMinWidth: 80,
                            cols: [[
                                { type: 'numbers', title: '序号', width: 44 },
                                { 
                                    field:'membername', 
                                    title: '名称',
                                    templet: function(d){
                                        return '<span lay-tips="'+ d.membername +'">'+ d.membername +'</span>'
                                    }
                                },
                                { field: 'dept_level', title: '级别' },
                                { title: '操作', align: 'center', toolbar: '#mag-table-operate-child-bar' }
                            ]],
                            skin: 'nob',
                            even: true,
                            data: data,
                            done: function(response, curr, count){
                                response.data && response.data.length > 0 ? reloadLaypage(res.data.totalNumber, window.currpage, window.limitNum) : $('#laypage').empty(); 
                                tools.setFont(layout);
                            }
                        });
                    }
                }
            })
        }

        //加载分页
        function reloadLaypage(totalNumber, pageNum, listNum){
            laypage.render({
                elem: 'laypage',
                count: totalNumber, //数据总数
                limit: listNum, //每页的条数
                curr: pageNum, //起始页
                limit: 10,
                next:'<i class="layui-icon">&#xe602;</i>',
                prev:'<i class="layui-icon">&#xe603;</i>',
                first: '<i class="layui-icon">&#xe65a;</i>',
                last: '<i class="layui-icon">&#xe65b;</i>',
                layout: ['refresh', 'first', 'prev', 'skip', 'count', 'allPage', 'next', 'last'],
                extend:{
                    first: true, //是否显示首页
                    spr: false,//是否显示页码分页符号 默认显示
                    pagecount: true//页码是否显示总数  groups=1时才有效
                },
                jump: function(obj, first){
                    if(!first){ //首次不执行
                        initTableUser(group_id, obj.curr, obj.limit);
                        window.currpage = obj.curr; //当前页数
                        window.limitNum = obj.limit; //当前页展示条数
                    }
                }
            })
        }

        
        //监听群组信息表格行点击事件
        table.on('row(mag-table-simple)', function(obj){
            var data = obj.data;
            $(this).addClass('liActive');
            $(this).siblings().removeClass('liActive');
            group_id = data.id;
            group_type = data.grouptype;
            initTableUser(data.id, 1, 10);
        });

        //监听群组表格工具栏
        table.on('tool(mag-table-simple)', function(obj){
            layui.stope(obj.ev); //阻止事件冒泡
            var event = obj.event,
                groupdata = obj.data;
            if(event == 'edit'){
                layer.open({
                    id: 'group-add-pastHtml',
                    title: '<i class="formFill-icon"></i><span style="color:#FFF;">修改群组</span>',
                    offset: '200px',
                    type: 1,
                    shadeClose: true,
                    area: ['400px', '380px'],
                    success: function(lay, index) {
                        view(this.id).render("./system/group/addGroup", {
                            groupInfo: { groupname: $.trim(groupdata.groupname), memo: $.trim(groupdata.memo)}
                        }).done(function() {
                            form.on('submit(formSubmit)', function(data){
                                var type = '1', //1为单位 2为人员
                                    jsonId = layui.data('layuiAdmin').access_token;
                                admin.req({
                                    type:"post",
                                    url: 'myapi/DC/api/rest/web/custom/group',
                                    data:{
                                        model: "update",
                                        id: groupdata.id,
                                        groupname: $.trim(data.field.groupName),
                                        memo: $.trim(data.field.memoVal),
                                        grouptype: type,
                                        jsonId: jsonId
                                    },
                                    success: function (res) {
                                        if(res.retcode == "0"){
                                            initTable();
                                            layer.close(index);
                                            layer.msg('修改成功', {time: 1000});
                                        }
                                    }
                                })
                            })
                        });
                    }
                });
            }else if(event == 'del'){
                layer.confirm('确认删除？', function (index) {
                    admin.req({
                        url: 'myapi/DC/api/rest/web/custom/Group',
                        data: {
                            model: "del",
                            group_id: obj.data.id
                        },
                        success: function(res){
                            if(res.retcode == '0'){
                                initTable();
                                layer.msg('删除成功');
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        })

        //监听人员表格工具栏
        table.on('tool(mag-table-child)', function(obj){
            var event = obj.event;
            if(event == 'add'){ //新增
                var groupPerson = [];
                admin.req({
                    url: 'myapi/DC/api/rest/web/custom/GroupOfPeople',
                    data: {
                        model: "select",
                        group_id: group_id    
                    },
                    done: function(res){
                        var data = res.data.data;
                        if(res.retcode == '0'){
                            layui.each(data, function(i, each){
                                if(group_type == '1'){
                                    groupPerson.push({ dept_id: each.memberid, dept_name: each.membername});
                                }else if(group_type == '2'){
                                    groupPerson.push({user_code: each.memberid, userName: each.membername});
                                }
                            })
                            if(group_type == '1'){
                                    layer.open({
                                        id: 'temporary-add-pastHtml',
                                        title:'<i class="formFill-icon"></i><span style="color:#FFF;">选择单位</span>',
                                        offset: '100px',
                                        type: 1,
                                        shadeClose: true,
                                        area: ['450px', '650px'],
                                        success: function(lay, index) {
                                            view(this.id).render("./system/group/addDepart", {
                                                //exitDep: groupPerson
                                            }).done(function() {
                                                $(lay).on('click', '.T-confirm', function() {
                                                    var selectDep = JSON.parse($(lay).find('.data-dep-container').val()),
                                                        deptNameStr = [];
                                                    if(selectDep && selectDep.length > 0){
                                                        layui.each(selectDep, function(index, item){
                                                            deptNameStr.push({ group_id: group_id, memberid: item.dataid, membername: item.dept_name });
                                                        })
                                                    }
                                                    admin.req({
                                                        type:"post",
                                                        url: 'myapi/DC/api/rest/web/custom/GroupOfPeople',
                                                        data:{ model:"insert",users:JSON.stringify(deptNameStr) },
                                                        success: function (res) {
                                                            if(res.retcode == "0"){
                                                                initTableUser(group_id, 1, 10);
                                                                layer.msg('新增成功');
                                                            }
                                                        }
                                                    })
                                                    layer.close(index);
                                                });
                                            });
                                        }
                                    });
                                }else if(group_type == '2'){
                                    layer.open({
                                        id: 'mag-delUnit-pastHtml',
                                        title: '<i class="formFill-icon"></i><span style="color:#FFF;">选择人员</span>',
                                        offset: '80px',
                                        type: 1,
                                        shadeClose: true,
                                        area: ['570px', '650px'],
                                        success: function(lay, index) {
                                            view(this.id).render("./task/temporary/addPerson", {
                                                //checkIds: groupPerson
                                            }).done(function() {
                                                $(lay).on('click', '.T-confirm', function() {
                                                    var selectReview = $(lay).find('.data-review-container').html(),
                                                        div = document.createElement('div'),
                                                        selectArr = [];
                                                    div.innerHTML = selectReview;

                                                    var allSpan = div.querySelectorAll('span');
                                                    layui.each(allSpan, function(index, item){
                                                        var usercode = item.getAttribute('usercode'),
                                                            username = item.innerText;
                                                        selectArr.push({ group_id: group_id, memberid: usercode, membername: username});
                                                    })
                                                    admin.req({
                                                        type:"post",
                                                        url: 'myapi/DC/api/rest/web/custom/GroupOfPeople',
                                                        data:{ model:"insert",users:JSON.stringify(selectArr) },
                                                        success: function (res) {
                                                            if(res.retcode == "0"){
                                                                initTableUser(group_id, 1, 10);
                                                                layer.msg('新增成功');
                                                            }
                                                        }
                                                    })
                                                    layer.close(index);
                                                });
                                            });
                                        }
                                    });
                                }
                        }
                    }
                })
            }else if(event == 'del'){ //删除
                layer.confirm('确认删除？', function (index) {
                    admin.req({
                        url: 'myapi/DC/api/rest/web/custom/GroupOfPeople',
                        data: {
                            model: "del",
                            id: obj.data.id
                        },
                        success: function(res){
                            initTableUser(group_id, 1, 10);
                            layer.msg('删除成功');
                            layer.close(index);
                        }
                    });
                });
            }
        })
})
</script>
